<style include="print-preview-shared cr-hidden-style">
  #dialog::part(dialog) {
    height: -webkit-fit-content;
    max-height: calc(100vh - 2 * var(--print-preview-dialog-margin));
    max-width:  calc(100vw - 2 * var(--print-preview-dialog-margin));
  }

  #dialog::part(wrapper) {
    height: calc(100vh - 2 * var(--print-preview-dialog-margin));
  }

  #dialog::part(body-container) {
    flex: 1;
  }

  print-preview-search-box {
    margin-bottom: 8px;
    margin-top: 16px;
  }

  cr-dialog [slot=body] {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #itemList {
    flex: 1;
    overflow-x: hidden;
    overflow-y: overlay;
  }

  #itemList.searching {
    padding-bottom: 20px;
    padding-top: 20px;
  }
</style>
<cr-dialog id="dialog" on-close="onCloseOrCancel_">
  <div slot="title">
    [[i18n('advancedSettingsDialogTitle', destination.displayName)]]
  </div>
  <div slot="body">
    <print-preview-search-box id="searchBox"
        hidden$="[[!hasMultipleItems_(
            destination.capabilities.printer.vendor_capability)]]"
        label="$i18n{advancedSettingsSearchBoxPlaceholder}"
        search-query="{{searchQuery_}}" autofocus>
    </print-preview-search-box>
    <div id="itemList" class$="[[isSearching_(searchQuery_)]]">
      <template is="dom-repeat"
          items="[[destination.capabilities.printer.vendor_capability]]">
        <print-preview-advanced-settings-item capability="[[item]]"
            settings="[[settings]]">
        </print-preview-advanced-settings-item>
      </template>
    </div>
    <div class="no-settings-match-hint"
        hidden$="[[!shouldShowHint_(hasMatching_)]]">
      $i18n{noAdvancedSettingsMatchSearchHint}
    </div>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="onCancelButtonClick_">
      $i18n{cancel}
    </cr-button>
    <cr-button class="action-button" on-click="onApplyButtonClick_">
      $i18n{advancedSettingsDialogConfirm}
    </cr-button>
  </div>
</cr-dialog>
